|

This separate environment is the “server” in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.

NOTE

How do I build support for Server Components? While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.

Server Components without Sever

Server components can run at build time to read from the filesystem or fetch static content, so a web server is not required. For example, you may want to read static data from a content management system. Without Server Components, it’s common to fetch static data on the client with an Effect:

// bundle.js

import marked from 'marked'; // 35.9K (11.2K gzipped)

import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)

 function Page({page}) { const [content, setContent] = useState('');

  // NOTE: loads *after* first page render.

  useEffect(() => { fetch(`/api/content/${page}`).then((data) => {

     setContent(data.content);

    });

 }, [page]);

  return {sanitizeHtml(marked(content))} ;

}

// api.js
   app.get(`/api/content/:page`, async (req, res) => {     

     const page = req.params.page;
     const content = await file.readFile(`${page}.md`);
  res.send({content});
});

This pattern means users need to download and parse an additional 75K (gzipped) of libraries, and wait for a second request to fetch the data after the page loads, just to render static content that will not change for the lifetime of the page. With Server Components, you can render these components once at build time:

import marked from 'marked'; // Not included in bundle

import sanitizeHtml from 'sanitize-html'; // Not included in bundle

 async function Page({page}) {

     // NOTE: loads *during* render, when the app is built.

      const content = await file.readFile(`${page}.md`);

  return {sanitizeHtml(marked(content))} ;

}

The rendered output can then be server-side rendered (SSR) to HTML and uploaded to a CDN. When the app loads, the client will not see the original Page component, or the expensive libraries for rendering the markdown. The client will only see the rendered output:

This means the content is visible during first page load, and the bundle does not include the expensive libraries needed to render the static content.